<!--
@description:  查询当前人员下小蜜蜂的商家信息，如果是admin查询所有
@author: zhangzhan
@time: 2024-09-18 16:23:56
-->
<template>
  <page-container title="商户列表">
    <!-- 表单区域 -->
    <el-form inline>
      <el-form-item label="搜索:">
        <el-input style="width: 240px" placeholder="店铺名称/法人/手机号码" v-model="parameter.key"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="selectClick">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="text-align:right"></div>

    <!-- -----------------表格---------------- -->
    <el-table :data="filterTableData"
              border size="large"
              row-key="managerId"
              style="width: 100%"
    >
      <el-table-column label="法人" prop="legalPerson" width="120" show-overflow-tooltip/>
      <el-table-column label="店铺名称" prop="storeName" width="120" show-overflow-tooltip/>
      <el-table-column label="店铺副标题" prop="supplierSubtitle" width="120" show-overflow-tooltip/>
      <el-table-column label="店铺评分" prop="hotScore" width="120" show-overflow-tooltip/>
      <el-table-column label="手机号码" prop="mobile" width="120" show-overflow-tooltip/>
      <el-table-column label="用户名" prop="userName" width="120" show-overflow-tooltip/>
      <el-table-column label="用户名" prop="userName" width="120" show-overflow-tooltip/>
      <el-table-column label="主营分类名" prop="categoryName" width="120" show-overflow-tooltip/>
      <el-table-column label="所在地区" prop="area" width="120" show-overflow-tooltip/>
      <el-table-column label="详细地址" prop="address" width="120" show-overflow-tooltip/>
      <el-table-column label="创建时间" prop="createTime" width="120" show-overflow-tooltip/>
      <el-table-column label="修改时间" prop="updateTime" width="120" show-overflow-tooltip/>


      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button type="primary" plain
                     @click="getInfo(scope.row)"
          >查看详情
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination background layout="->,prev, pager, next"
                   :total="paginations.total"
                   @change="tableChange"/>

    <supplier-with-info
        v-model:model-value="modelValue"
        v-model:form="form"
        @searc="onSearch"
    >

    </supplier-with-info>

  </page-container>

</template>
<script setup>


import {usePagination, useRequest} from "vue-request";
import SupplierCheck from "@/components/check/supplier/SupplierCheck.vue";
import BeesForm from "@/components/sys/bees/BeesForm.vue";
import {ref, computed} from "vue";
import {pageList} from "@/api/supplier/SupplierInfo.js";
import SupplierWithInfo from "@/components/supplier/SupplierWithInfo.vue";

//子组件
// form表单参数
const form = ref({
  supplierInfoId: undefined,
  legalPerson: '',
  storeName: '',
  supplierSubtitle: '',
  hotScore: '0.0',
  mobile: '',
  idNumber: '',
  businessUrl: '',
  userName: '',
  categoryName: '',
  beesName: '',
  area: '',
  address: '',
  shopFrontUrl: '',
  cardNumber: '',
  reservedNumber: '',
  depositBank: '',
  dayOfWeek: '',
  openTime: undefined,
  endTime: undefined,
  isHoliday: '',
  createTime: undefined,
  updateTime: undefined
})

const modelValue = ref(false)

// 表单重置
function reset() {
  (form.value = {
    supplierInfoId: undefined,
    legalPerson: '',
    storeName: '',
    supplierSubtitle: '',
    hotScore: 0.0,
    mobile: '',
    idNumber: '',
    businessUrl: '',
    userName: '',
    categoryName: '',
    beesName: '',
    area: '',
    address: '',
    shopFrontUrl: '',
    cardNumber: '',
    reservedNumber: '',
    depositBank: '',
    dayOfWeek: '',
    openTime: undefined,
    endTime: undefined,
    isHoliday: '',
    createTime: undefined,
    updateTime: undefined
  })
}

//查看详情
function getInfo(row) {
  form.value = row
  modelValue.value = true
}

const parameter = ref({
  page: 1,//当前页码
  limit: 10,//每页记录数
  key: ''//检索关键字
})


//分页查询
const {data, total, run: search} = usePagination((d) => pageList(d), {
  defaultParams: [parameter.value],
  pagination: {
    currentKey: 'page',
    pageSizeKey: 'limit',
    totalKey: 'data.data.page.totalCount',
  }
})


//分页数据计算属性
const paginations = computed(() => {
  return {
    current: parameter.value?.page, //当前页
    pageSize: parameter.value?.limit, //页大小
    total: total.value,
  }
})

//分页事件
function tableChange(currentPage, pageSize) {
  parameter.value.page = currentPage ?? 1
  parameter.value.limit = pageSize ?? 10
  search(parameter.value)
}

//商家数据计算属性
const filterTableData = computed(() => {
  return data.value?.data?.data?.page?.list || []
})

function onSearch() {
  search(parameter.value)
}

//查询点击
function selectClick() {
  search(parameter.value)
}

</script>